<template>
	<view class="center">
		<view class="center_box_bg">
			<view class="base" @click="toUserInfo()">
				<image class="profily_header" v-if="userInfo.avatarUrl" :src="userInfo.avatarUrl"></image>
				<image class="profily_header" v-if="!userInfo.avatarUrl" :src="defaultAvatarUrl"></image>
				<!-- 有数据状态  -->
				<view v-if="hasLogin == true">
					<view v-if="userInfo">
						<view style="font-size: 25px;">{{userInfo.nickname}}</view>
					</view>
				</view>
				<!-- 未登录状态 -->
				<view v-if="hasLogin == false">
					<view>
						<view @click="getNav('login')"><text>请登录</text></view>
					</view>
				</view>
				<!-- <image class="base_image" v-if="hasLogin != false" @click="logout"
					src="/static/fumou-center-template/setting.png" mode=""></image> -->
			</view>

			<view class="order_status">
				<view class="status" v-for="(item, index) in status" :key="index" @click="getNav(item.url)">
					<image class="icon" :src="item.icon" mode="aspectFit"></image>
					<text>{{ item.name }}</text>
				</view>
			</view>
			<view class="center_menu">
				<view class="menu_item" v-for="(item, index) in menus" :key="index" @click="getNav(item.url)">
					<image :src="item.icon" mode="aspectFit"></image>
					<text>{{ item.name }}</text>
					<uni-icons class="icon" type="arrowright"></uni-icons>
				</view>
			</view>
		</view>

		<button v-if="hasLogin" @click="logout" style="width: 90%;margin-top: 20px;border-radius: 11px;" plain type="primary">退出</button>
		<view class="uni-empty">
			<text class="text1"></text>
			--版权所有
			<text class="text2"></text>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				defaultImg: '/static/img/header-img.png',
				defaultAvatarUrl: '/static/images/avatar.png',
				userInfo: {},
				hasLogin: false,
				status: [{
						name: '我的订单',
						icon: '/static/fumou-center-template/my-order.png',
						url: ''
					},
					{
						name: '我的工单',
						icon: '/static/fumou-center-template/work-order.png',
						url: 'repair-order'
					},
					{
						name: '发票下载',
						icon: '/static/fumou-center-template/download.png',
						url: ''
					},
					{
						name: '我的余额',
						icon: '/static/fumou-center-template/balance.png',
						url: ''
					}
				],
				menus: [
					// {
					// 	name: '我的房产',
					// 	icon: '/static/fumou-center-template/house.png',
					// 	url: 'my-house'
					// },
					// {
					// 	name: '我的车辆',
					// 	icon: '/static/fumou-center-template/car.png',
					// 	url: 'my-car'
					// },
					{
						name: '我的工单',
						icon: '/static/fumou-center-template/w-order.png',
						url: 'repair-order'
					},
					{
						name: '联系物业',
						icon: '/static/fumou-center-template/contact.png',
						url: 'call'
					},
					{
						name: '关于我们',
						icon: '/static/fumou-center-template/about.png',
						url: 'about'
					}
				],
				ownerInfo: ''
			};
		},
		onLoad() {
			this.getData();
		},
		onPullDownRefresh() {
			this.getData();
			setTimeout(() => {
				uni.stopPullDownRefresh();
			}, 2000)
		},
		onShow() {
			this.getData();
		},
		beforeUpdate() {
			this.getData();
		},
		methods: {
			toUserInfo() {
				console.log(this.hasLogin);
				if (this.hasLogin) {
					uni.navigateTo({
						url: '/pages/user/userinfo/userinfo'
					})
				} else {
					uni.navigateTo({
						url: '/pages/login/login'
					})
				}
			},
			getData() {
				this.getUserInfo();
				this.ifHasLogin();
			},
			getUserInfo() {
				let userInfo = uni.getStorageSync('userInfo');
				this.userInfo = userInfo;
				console.log(this.userInfo);
			},
			ifHasLogin() {
				let userInfo = uni.getStorageSync('userInfo');
				let res = userInfo == null || userInfo == '' ? false : true;
				console.log("登录？" + res);
				this.hasLogin = res;
			},
			logout() {
				uni.showModal({
					title: '是否退出登录？',
					content: '退出登录将无法收到消息,您真的要退出登录吗？',
					success: res => {
						if (res.confirm) {
							setTimeout(() => {
								uni.removeStorageSync('userInfo');
								uni.removeStorageSync('token');
								this.getData();
							}, 100);
						}
					}
				});
			},
			getNav(url) {
				if (!url) {
					uni.showToast({
						icon: 'none',
						title: '正在开发...'
					});
					return;
				}
				this.$Router.push({
					name: url
				});
			}
		},
		computed: {

			myHouse() {
				return this.$store.state.myHouse;
			},
			hasBoundHouse() {
				return this.$store.state.hasBoundHouse;
			}
		}
	};
</script>

<style>
	@import url('./center.css');
</style>
